<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .book-list {
            border:lpx solid; 
            padding:20px;
            display: inline-block;
            background: rgb(56,131,216);
            color:#fff;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
         <people-list></people-list>

         <book-iteml></book-item1>

        <book-list></book-list>
    </div>
</body>
<script type="tex1/x-template" id="people-list">
   <ul>
    <li>tom</li>
    <li>jerry</li>
    <li>kevin</li>
   </ul>
</script>
<script>
    Vue.component('people-list',{
        template: '#people-list'
    })
    Vue.component('BookItem1', {
        template: '<div>书名:《西游记》</div>'
    })
    Vue.component('BookItem2',{
        template: '<div>书名:《三国演义》</div>'
    })
    Vue.component('BookList', {
        template:`<ul class="book-list">
            <li><BookIteml></BookIteml></li>
            <li><BookItem2></BookItem2></li>
            </ul>`
        })
    let vm = new Vue({
    el: '#app'
    })
</script>
</html>